<template>
  <div id="fl">
    <p>
      <input placeholder="回车搜索商品" type="text" />
    </p>
    <div>
      <ol>
        <li class="feired" :class="{'active':n==0}" @click="all">所有分类</li>

        <li class="feired" :class="{'active':(index+1)==n}" v-for="(item,index) of a1" :key="item.id" @click="getChildren(item.id,index+1)">{{ item.name }}</li>
      </ol>

      <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item of banner" :key="item.id">
              <img :src="item.img" alt="">
          </van-swipe-item>
        </van-swipe>
        <!-- 二级分类 -->
        <ul>
          <li v-for="item of a2" :key="item.id" class="" @click="gocate(item.id)">
            <img :src="item.icon" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      a1: [],
      a2: [],
      a3: [],
      n: 0,
      banner: [              
        { img: "static/tup1.jpg" },
        { img: "static/tup2.jpg" },
        { img: "static/tup3.jpg" },
        { img: "static/tup4.jpg" }
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    //异步获取数据   await
    async getData() {
      // 获取分类数据的方法
      var d = await this.http.get( "https://api.it120.cc/small4/shop/goods/category/all" );
    //   console.log(d);

      if (d.data.msg == "success") {
        var c1 = d.data.data.filter(item => { // 通过数组过滤方法  把一级分类 过滤出来
          return item.level == 1;
        });
        //console.log(c1)
        this.a1 = c1; // 把一级分类放到a1

        this.a3 = d.data.data; // 把所有的分类放到 a3

        this.a2 = d.data.data;
      }
    },
    getChildren(id, index) {
      //alert(id)

      var d2 = this.a3.filter(item => {
        return item.pid == id;
      });

      console.log(d2);
      this.a2 = d2;

      this.n = index; // 把索引值 赋值给 n
    },
    all() {
      this.a2 = this.a3; // 右侧显示所有的分类
      this.n = 0; // 设置激活样式
    },
    gocate(id){
      //  this.$router.push("/categoods?cid"+id)
              this.$router.push("/flsp?cid="+id)

    }
  },

  created() {
    this.getData();
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
#fl {
  > p:nth-of-type(1) {
    width: 100%;
    height: 0.5rem;
    border-bottom: 0.01rem solid #f3f3f3;
    display: flex;
    align-items: center;
    input {
      width: 3.47rem;
      height: 0.35rem;
      background: #f5f5f5;
      border: none;
      border-radius: 0.2rem;
      margin-left: 0.2rem;
      padding-left: 0.2rem;
    }
  }
  > div:nth-of-type(1) {
    display: flex;
    ol {
      width: 1.27rem;
      border-right: 0.01rem solid #e9e9e9;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0.51rem;
      overflow: auto;
      background: white;
      z-index: 1;
      li {
        width: 1.27rem;
        height: 0.5rem;
        font-size: 0.2rem;
        text-align: center;
        line-height: 0.5rem;
        margin-top: 0.1rem;
      }
    }
    > div {
      position: fixed;
      left: 1.27rem;
      top: 0.51rem;
      overflow: auto;
      height: 100%;
      > div {
        width: 3.92rem;
      }
      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 3.72rem;
        text-align: center;
        padding: 0 0.1rem;
        li {
          width: 30%;
          margin-top: 0.1rem;
          img {
            width: 1.1rem;
            height: 1.1rem;
            display: block;
          }
          p {
            font-size: 0.16rem;
            color: #3e4561;
            margin-top: 0.05rem;
          }
        }
      }
    }
  }
}
.red {
  border-left: 0.03rem solid #d41515;
  color: #d41515;
}
.feired {
  border-left: 0.03rem solid white;
  color: #675d56;
}
.feired.active {
  border-left: 0.03rem solid red;
  color: #f00;
}
.img_weixin {
  width: 100%;
  height: 1.8rem;
}
.antd_img {
  width: 80%;
  margin: 0 auto;
  border-radius: 0.06rem;
  margin-top: 0.1rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  img {
    width: 90%;
    height: 150px;
    border-radius: 10%;
    margin-top: 0.1rem;
  }
}
</style>